<template>
	<view class="wrap">
		<view class="header">
			<view class="header-control">
				<view class="header-control-view-tagCard">
					<uni-data-checkbox mode="tag" :multiple="false" v-model="value" :localdata="range"
						@change="changeTagCard"></uni-data-checkbox>
				</view>
			</view>
			<!-- 日历 -->
			<lxCalendar v-show="statisticType === 'calendar'" @change="calendarChange"></lxCalendar>
			<!-- <view class="calendar" v-if="statisticType === 'calendar'">
				每日的日历
			</view> -->
			<!-- 日历 -->
			<!-- 周历 -->
			<statistic-week v-show="statisticType === 'week'" @change="weekChange"></statistic-week>
			<!-- <view class="week" v-if="statisticType === 'week'">
				{{weekRecords}}的打卡记录
			</view> -->
			<!-- 周历 -->
			<!-- 月历 -->
			<statistic-month v-show="statisticType === 'month'" @change="monthChange"></statistic-month>
			<!-- <view class="month" v-if="statisticType === 'month'">
				每月的日历
			</view> -->
			<!-- 月历 -->
		</view>
		<view class="content" v-if="iscontent">
			<view class="title" v-if="is_audit == 1">个人考勤</view>
			<view class="title" v-else>团队考勤（团队总人数：{{Info.total0}}）</view>
			<view class="rate">
				<text>出勤率{{Info.rate}}%</text>
				<!-- <view class="sign">较昨日无变化</view> -->
			</view>
			<view class="data">
				<text>整体数据</text>
				<view class="text">应出勤{{Info.total1}}人次，已出勤{{Info.total2}}人次</view>
			</view>
			<view class="data">
				<text>异常数据</text>
				<view class="text">{{Info.total3}}人次迟到，{{Info.total1 - Info.total2}}人次缺卡</view>
			</view>
			<!-- <view class="data">
				<text>异常人员</text>
				<view class="img_wrap">
					<image src="" mode=""></image>
				</view>
			</view> -->
			<!-- <view class="date">数据截至01月14日 10:05</view> -->
		</view>
		<view class="content" v-else>
			<u-empty text="暂无统计结果"></u-empty>
		</view>
		<view class="bottom"  v-if="iscontent" @click="handleDetail">
			<view class="btn">查看详情</view>
		</view>
	</view>
</template>

<script>
	import { signReport } from '../../../api/manager'
import lxCalendar from '../../../components/lx-calendar/lx-calendar.vue'
	export default {
		components:{
		    lxCalendar,
		},
		data () {
			return {
				value: 0,
				range: [{
					value: 0,
					text: "日",
					mode: "calendar"
				}, {
					value: 1,
					text: "周",
					mode: "week"
				}, {
					value: 2,
					text: "月",
					mode: "month"
				}],
				statisticType: "calendar",
				weekRecords: "", 	   //周历记录
				date: '',
				start_time: this.$dateFormat(new Date()) + ' 00:00:00',
				end_time: this.$dateFormat(new Date()) + ' 23:59:59',
				Info: {},
				cS: this.$dateFormat(new Date()) + ' 00:00:00',
				cE: this.$dateFormat(new Date()) + ' 23:59:59',
				wS: '',
				wE: '',
				mS: '',
				mE: '',
				iscontent: true,
				is_audit: uni.getStorageSync('userinfo').is_audit
			}
		},
		onLoad () {
			this.getData()
		},
		methods: {
			async getData () {
				let res = await signReport({
					start_time: this.start_time,
					end_time: this.end_time
				})
				res.data.rate = res.data.rate.toFixed(2)
				this.Info = res.data
			},
			
			handleIs (time) {
				var date1 = new Date();
				var date2 = new Date(time);
				 
				// 将Date对象转换为时间戳进行比较
				if (date2.getTime() > date1.getTime()) {
				  // console.log("第二个时间大于第一个时间");
				  return false
				} else {
				  // console.log("第二个时间小于等于第一个时间");
				  return true
				}
			},
			
			changeTagCard(e) {
				console.log(e, 'tab')
				this.statisticType = e.detail.data.mode
				if (this.statisticType === 'calendar' && this.cS) {
					this.start_time = this.cS
					this.end_time = this.cE
				} else if (this.statisticType === 'week' && this.wS) {
					this.start_time = this.wS
					this.end_time = this.wE
				} else if (this.statisticType === 'month' && this.mS) {
					this.start_time = this.mS
					this.end_time = this.mE
				}
				this.getData()
			},
			
			/* 日历回调 */
			calendarChange(e){
				console.log(e, 'calendar')
				this.date = e.fulldate
				this.cS = e.fulldate + ' 00:00:00'
				this.cE = e.fulldate + ' 23:59:59'
				this.start_time = e.fulldate + ' 00:00:00'
				this.end_time = e.fulldate + ' 23:59:59'
				if (this.handleIs(this.start_time)) {
					this.iscontent = true
				} else {
					this.iscontent = false
					return
				}
				this.getData()
				// this.calendarRecords = `当前月份：${e.selectedDate},第${e.selectedWeek}周`
			},
			
			/* 周历回调 */
			weekChange(e){
				console.log(e, 'w')
				var arr = e.selectedDate.split('-')
				var days = this.getWeekData(arr[0], arr[1])
				var week = days[e.selectedWeek - 1]
				var begin = week.beginTime.split('-')
				var m, n;
				var y = arr[0];
				if (begin[2] == '01') {
					if (arr[1] == '01') {
						m = 12
						y = arr[0] - 1
					} else {
						m = arr[1] - 1
					}
					var n = this.getWeekData(y, m)
				}
				if (n) {
					this.start_time = n[n.length - 1].beginTime + ' 00:00:00'
					this.end_time =  days[0].endTime + ' 23:59:59'
					this.wS = n[n.length - 1].beginTime + ' 00:00:00'
					this.wE =  days[0].endTime + ' 23:59:59'
				} else {
					this.start_time = days[e.selectedWeek - 1].beginTime + ' 00:00:00'
					this.end_time =  days[e.selectedWeek - 1].endTime + ' 23:59:59'
					this.wS = days[e.selectedWeek - 1].beginTime + ' 00:00:00'
					this.wE =  days[e.selectedWeek - 1].endTime + ' 23:59:59'
				}
				if (this.handleIs(this.start_time)) {
					this.iscontent = true
				} else {
					this.iscontent = false
					return
				}
				this.getData()
			},
			
			        getWeekData(year, month) { //传入  年  月  获取当月有几周 以及日期 
			            var new_year = year;    //取当前的年份
			            var new_month = month++;//取下一个月的第一天，方便计算（最后一天不固定）
			            if(new_month<10){ new_month = '0' + new_month }
			            var weekDay = ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期天"];
			            if (new_month > 12) {
			                new_month -= 12;        //月份减
			                new_year++;            //年份增
			            }
			            var first_date = new Date(new_year, new_month, 1);                //取当年当月中的第一天-时间格式
			            var last_Data = (new Date(first_date.getTime() - 1000 * 60 * 60 * 24)).getDate() //获取当月最后一天日期
			            //当月第一天是周几
			            var firstzhouji = new Date(new_year + '/' + new_month + '/' + 1).getDay() == 0 ? '星期天' : weekDay[new Date(new_year + '/' + new_month + '/' + 1).getDay() - 1]
			            //当月最后一天是周几
			            var lastzhouji = new Date(new_year + '/' + new_month + '/' + last_Data).getDay() == 0 ? '星期天' : weekDay[new Date(new_year + '/' + new_month + '/' + last_Data).getDay() - 1]
			            var firsttime = '' //第一周有几天
			            if (firstzhouji == '星期一') { firsttime = 7 }
			            if (firstzhouji == '星期二') { firsttime = 6 }
			            if (firstzhouji == '星期三') { firsttime = 5 }
			            if (firstzhouji == '星期四') { firsttime = 4 }
			            if (firstzhouji == '星期五') { firsttime = 3 }
			            if (firstzhouji == '星期六') { firsttime = 2 }
			            if (firstzhouji == '星期天') { firsttime = 1 }
			         
			            var lasttime = '' //最后一周有几天
			            if (lastzhouji == '星期一') { lasttime = 1 }
			            if (lastzhouji == '星期二') { lasttime = 2 }
			            if (lastzhouji == '星期三') { lasttime = 3 }
			            if (lastzhouji == '星期四') { lasttime = 4 }
			            if (lastzhouji == '星期五') { lasttime = 5 }
			            if (lastzhouji == '星期六') { lasttime = 6 }
			            if (lastzhouji == '星期天') { lasttime = 7 }
			         
			            // 前后两周  加上 剩余周数  得出总周数
			            var contime = 2 + (last_Data - lasttime - firsttime) / 7
			         
			            //得出每周对应的日期
			            var zhouArry = []
			         
			            for (var i = 1; i <= contime; i++) {
			                var strTime = ''
			                var lastTime = ''
			                if (i == 1) {
			                    strTime = year + '-' + new_month + '-' + '01'
			                    let aa = 1 + firsttime - 1
			                    if(aa<10){
			                        aa='0'+aa
			                    }
			                    lastTime = year + '-' + new_month + '-' + aa
			                } else if (i == contime) {
			                    let bb = last_Data - lasttime + 1
			                    if(bb<10){
			                        bb='0'+bb
			                    }
			                    strTime = year + '-' + new_month + '-' + bb
			                    lastTime = year + '-' + new_month + '-' + (last_Data<10 ? ('0'+last_Data) : last_Data )
			                } else {
			                    strTime = addDate(zhouArry[zhouArry.length - 1].endTime, 1)
			                    lastTime = addDate(zhouArry[zhouArry.length - 1].endTime, 7)
			                }
			        
			                zhouArry.push({
			                    weeknum: i,
			                    beginTime: strTime,
			                    endTime: lastTime,
			                })
			         
			            //日期增加 接受两个参数， 传入的时间，传入时间增加的天数
			            function addDate(date, days) {
			                if (days == undefined || days == '') {
			                    days = 1;
			                }             
			                var date = new Date(date);
			                date.setDate(date.getDate() + days);
			                var month = date.getMonth() + 1;
			                if(month<10){ month = '0' + month;}
			                var day = date.getDate();    
			                if(day<10){ day = '0' + day;}        
			                return date.getFullYear() + '-' + month + '-' + day;
			            }      
			            }
			            return zhouArry
			         },
			
			/* 月历回调 */
			monthChange(e){
				console.log(e, 'm')
				var arr = e.selectedDate.split('-')
				var days = this.mGetDate(arr[0], arr[1])
				this.start_time = e.selectedDate + '-01 00:00:00'
				this.end_time = e.selectedDate + '-' + days + ' 23:59:59'
				this.mS = e.selectedDate + '-01 00:00:00'
				this.mE = e.selectedDate + '-' + days + ' 23:59:59'
				if (this.handleIs(this.start_time)) {
					this.iscontent = true
				} else {
					this.iscontent = false
					return
				}
				this.getData()
			},
			
			mGetDate(y, m){
			     var date = new Date(y, m);
			     var year = date.getFullYear();
			     var month = date.getMonth();
			     var d = new Date(year, month, 0);
			     return d.getDate();
			},
			
			handleDetail () {
				uni.navigateTo({
					url: '/pages/pageB/data/clockInDetails?start_time=' + this.start_time + '&end_time=' + this.end_time
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		min-height: 100vh;
		height: fit-content;
		background-color: #F2F2F2;
		padding: 15px;
		box-sizing: border-box;
		
		.header {
			box-sizing: border-box;
			margin-bottom: 15px;
		
			.header-control {
				padding: 12px;
				padding-bottom: 0;
				background-color: #FFFFFF;
				border-radius: 10px 10px 0 0;
				box-sizing: border-box;
		
				.header-control-view-tagCard {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding-bottom: 24rpx;
					border-bottom: 1px solid #ccc;
				}
			}
			
			.calendar{
				background-color: #FFFFFF;
				height: 300rpx;
				border-radius: 0 0 20rpx 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			
			.week{
				background-color: #FFFFFF;
				height: 300rpx;
				border-radius: 0 0 20rpx 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			
			.month{
				background-color: #FFFFFF;
				height: 300rpx;
				border-radius: 0 0 20rpx 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
		
		.content {
			padding: 12px;
			border-radius: 10px;
			background-color: #fff;
			box-sizing: border-box;
			margin-bottom: 50px;
			
			.title {
				font-size: 18px;
				margin-bottom: 10px;
			}
			
			.rate {
				display: flex;
				align-items: center;
				margin-bottom: 10px;
				
				text {
					font-size: 20px;
					font-weight: bold;
					color: #0a84ff;
					margin-right: 15px;
				}
				
				.sign {
					width: fit-content;
					height: 24px;
					color: #666;
					font-size: 14px;
					line-height: 24px;
					padding: 0 10px;
					border: 1px solid #ddd;
					border-radius: 6px;
					box-sizing: border-box;
				}
			}
			
			.data {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 10px;
				
				text {
					font-size: 16px;
					color: #666;
				}
				
				.text {
					width: 65vw;
					font-size: 16px;
				}
				
				.img_wrap {
					width: 65vw;
					display: flex;
					align-items: center;
					
					image {
						width: 28px;
						height: 38px;
					}
				}
			}
			
			.date {
				font-size: 14px;
				color: #666;
			}
		}
		
		.bottom {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			
			.btn {
				width: 60%;
				height: 48px;
				line-height: 48px;
				color: #fff;
				text-align: center;
				font-size: 16px;
				background-color: #0a84ff;
				border-radius: 24px;
				box-sizing: border-box;
			}
		}
	}
</style>